<template>
  <DistributorLayout>
    <div class="dashboard-page">
      <div class="dashboard-page__header">
        <h1 class="dashboard-page__title">经销商控制台</h1>
        <p class="dashboard-page__subtitle">欢迎回来，这是您的业务数据概览</p>
      </div>

      <div class="flex flex-wrap">
        <el-card class="margin-top" style="width: 20%; margin-right: 5%;">
          <div>今日订单数量（创建的订单数量）</div>
          <h3 class="margin-top">{{ statisticsData.dayOrderDataNum?.orderCountDayData || 0 }}</h3>
        </el-card>

        <el-card class="margin-top" style="width: 20%; margin-right: 5%;">
          <div>今日完成订单总金额</div>
          <h3 class="margin-top">{{ statisticsData.dayOrderData?.orderMoneyDayData || 0 }}</h3>
        </el-card>

        <el-card class="margin-top" style="width: 20%; margin-right: 5%;">
          <div>今日完成的订单数</div>
          <h3 class="margin-top">{{ statisticsData.dayOrderData?.orderCountDayData || 0 }}</h3>
        </el-card>


        <el-card class="margin-top" style="width: 20%; margin-right: 5%;">
          <div>本月完成订单数</div>
          <h3 class="margin-top">{{ statisticsData.DayOrderDataMonthNum?.orderCountDayData || 0 }}</h3>
        </el-card>

        <el-card class="margin-top" style="width: 20%; margin-right: 5%;">
          <div>本月完成订单总金额</div>
          <h3 class="margin-top">{{ statisticsData.DayOrderDataMonthNum?.orderMoneyDayData || 0 }}</h3>
        </el-card>

<!--        <el-card class="margin-top" style="width: 20%; margin-right: 5%;">-->
<!--          <div>等待结算的订单</div>-->
<!--          <h3 class="margin-top">{{ statisticsData.DayOrderDataWaitNum?.orderMoneyDayData || 0 }}</h3>-->
<!--        </el-card>-->

        <el-card class="margin-top" style="width: 20%; margin-right: 5%;">
          <div>本月佣金</div>
          <h3 class="margin-top">{{ statisticsData.DayOrderDataMonthNum?.commission || 0 }}</h3>
        </el-card>
        <el-card class="margin-top" style="width: 20%; margin-right: 5%;">
          <div>总佣金</div>
          <h3 class="margin-top">{{ statisticsData.zongyongjin?.commission || 0 }}</h3>
        </el-card>
      </div>

      <!-- 数据概览卡片网格 -->
<!--      <div class="dashboard-page__stats-grid" v-if="false">-->
<!--        &lt;!&ndash; 今日订单数 &ndash;&gt;-->
<!--        <StatCard title="今日订单数" :value="statisticsData.dayOrderDataNum.orderCountDayData" icon="fa-shopping-cart"-->
<!--          :growth-rate="dashboardData.weeklyGrowthRate" format="number" show-mini-chart />-->

<!--        &lt;!&ndash; 今日销售额 &ndash;&gt;-->
<!--        <StatCard title="今日销售额" :value="statisticsData.dayOrderDataNum.orderMoneyDayData" icon="fa-yuan-sign"-->
<!--          :growth-rate="Math.round(dashboardData.weeklyGrowthRate * 1.2)" format="currency" show-mini-chart />-->

<!--        &lt;!&ndash; 本月累计佣金 &ndash;&gt;-->
<!--        <StatCard title="本月累计佣金" :value="dashboardData.monthlyAccumulatedCommission" icon="fa-money-bill-wave"-->
<!--          :growth-rate="Math.round(dashboardData.weeklyGrowthRate * 0.8)" format="currency" />-->

<!--        &lt;!&ndash; 待提现佣金 &ndash;&gt;-->
<!--        <StatCard title="待提现佣金" :value="dashboardData.pendingWithdrawalCommission" icon="fa-wallet" action-text="申请提现"-->
<!--          format="currency" @action-click="handleWithdrawal" />-->

<!--        &lt;!&ndash; 活跃代付链接数 &ndash;&gt;-->
<!--        <StatCard title="活跃代付链接数" :value="dashboardData.activePaymentLinkCount" icon="fa-link" action-text="创建链接"-->
<!--          format="number" @action-click="handleCreateLink" />-->
<!--      </div>-->

      <!-- 销售趋势图表 -->
      <!-- <SalesTrendChart /> -->

<!--      <div class="dashboard-grid" v-if="false">-->
<!--        &lt;!&ndash; 热门商品 &ndash;&gt;-->
<!--        <div class="grid-card">-->
<!--          <div class="card-header">-->
<!--            <h3 class="card-title">热门商品</h3>-->
<!--            <router-link to="/distributor/products" class="view-more">查看全部</router-link>-->
<!--          </div>-->
<!--          <div class="card-body">-->
<!--            <div class="product-list">-->
<!--              <div v-for="product in topProducts" :key="product.name" class="product-item">-->
<!--                <div class="product-img">-->
<!--                  <img :src="product.image" :alt="product.name" />-->
<!--                </div>-->
<!--                <div class="product-info">-->
<!--                  <div class="product-name">{{ product.name }}</div>-->
<!--                  <div class="product-category">{{ product.category }}</div>-->
<!--                  <div class="product-sales">销量: {{ formatNumber(product.sales) }}</div>-->
<!--                </div>-->
<!--                <div class="product-commission">-->
<!--                  <div class="commission-rate">{{ product.commissionRate }}</div>-->
<!--                  <div class="commission-value">{{ formatNumber(product.commission) }} USDT</div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->

<!--        &lt;!&ndash; 最近订单 - 使用组件 &ndash;&gt;-->
<!--        <RecentOrdersList />-->
<!--      </div>-->

      <!-- 快捷操作区域 -->
<!--      <div class="quick-actions" v-if="false">-->
<!--        <h3 class="quick-actions__title">快捷操作</h3>-->
<!--        <div class="quick-actions__buttons">-->
<!--          <button class="btn btn-primary" @click="handleCreateLink">-->
<!--            <i class="fas fa-link"></i>-->
<!--            创建新代付链接-->
<!--          </button>-->
<!--          <router-link to="/distributor/orders" class="btn btn-secondary">-->
<!--            <i class="fas fa-list-ul"></i>-->
<!--            查看订单列表-->
<!--          </router-link>-->
<!--          <button class="btn btn-secondary" @click="handleWithdrawal">-->
<!--            <i class="fas fa-wallet"></i>-->
<!--            申请提现-->
<!--          </button>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </DistributorLayout>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import DistributorLayout from './DistributorLayout.vue'
import StatCard from '@/components/distributor/dashboard/StatCard.vue'
import SalesTrendChart from '@/components/distributor/charts/SalesTrendChart.vue'
import RecentOrdersList from '@/components/distributor/dashboard/RecentOrdersList.vue'
import {
  generateDashboardData,
  generateDistributorOverview,
  generateTopProducts
} from '@/utils/mockData'

import { StatisticsDataNumApi } from '@/api/index'

// 用户信息
const userName = ref('张三')

// 获取仪表盘数据
const dashboardData = ref(generateDashboardData())

// 分销商概览数据
const overview = ref(generateDistributorOverview())

// 热门商品数据
const topProducts = ref(generateTopProducts(5))

// 方法: 处理申请提现
const handleWithdrawal = () => {
  // 跳转到佣金管理页面或打开提现弹窗
  alert('跳转到提现页面')
}

// 方法: 处理创建链接
const handleCreateLink = () => {
  // 跳转到创建链接页面
  alert('跳转到创建链接页面')
}

// 格式化数字
const formatNumber = (num: number) => {
  return num.toLocaleString('zh-CN')
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}

onMounted(() => {
  // 在实际应用中，这里可以调用API获取实时数据
  console.log('Dashboard mounted, fetching data...')
})

const statisticsData = reactive({
  dayOrderDataNum: {},
  dayOrderData: {},
  DayOrderDataMonthNum: {},
  DayOrderDataWaitNum: {},
  dayOrderDataNumOk: {},
  zongyongjin:{}
})

const getStatisticsDataRequest = async () => {
  try {
    const res = await StatisticsDataNumApi({})

    Object.assign(statisticsData, res.data)
  } catch (error) {
    console.log(error);

  }
}

getStatisticsDataRequest()
</script>

<style scoped lang="scss">
.dashboard-page {
  &__header {
    margin-bottom: 24px;
  }

  &__title {
    font-size: 24px;
    font-weight: 700;
    color: #2F3542;
    margin: 0 0 8px 0;
  }

  &__subtitle {
    font-size: 14px;
    color: #6C757D;
    margin: 0;
  }

  &__stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;

    // 前两个卡片占用2格宽度
    > :nth-child(1),
    > :nth-child(2) {
      grid-column: span 1;

      @media (min-width: 992px) {
        grid-column: span 1;
      }
    }
  }
}

// 响应式布局
@media (max-width: 1200px) {
  .dashboard-page {
    &__stats-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

@media (max-width: 992px) {
  .dashboard-page {
    &__stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (max-width: 768px) {
  .dashboard-page {
    &__stats-grid {
      grid-template-columns: 1fr;
    }
  }
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 24px;

  @media (max-width: 992px) {
    grid-template-columns: 1fr;
  }
}

.grid-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;

  .card-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }

    .view-more {
      font-size: 14px;
      color: #4e7df9;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .card-body {
    padding: 0;
  }
}

.product-list {
  .product-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .product-img {
      width: 48px;
      height: 48px;
      border-radius: 6px;
      overflow: hidden;
      margin-right: 12px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .product-info {
      flex: 1;

      .product-name {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin-bottom: 4px;
      }

      .product-category {
        font-size: 12px;
        color: #888;
        margin-bottom: 4px;
      }

      .product-sales {
        font-size: 12px;
        color: #666;
      }
    }

    .product-commission {
      text-align: right;

      .commission-rate {
        font-size: 12px;
        color: #888;
        margin-bottom: 4px;
      }

      .commission-value {
        font-size: 14px;
        font-weight: 600;
        color: #2ecc71;
      }
    }
  }
}

.order-list {
  .order-item {
    padding: 16px 20px;
    border-bottom: 1px solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .order-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

      .order-id {
        font-size: 14px;
        font-weight: 500;
        color: #333;
      }

      .order-date {
        font-size: 12px;
        color: #888;
      }
    }

    .order-details {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

      .order-customer {
        font-size: 14px;
        color: #555;
      }

      .order-amount {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
    }

    .order-status {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .status-text {
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 10px;
        background-color: #f1f5ff;
        color: #4e7df9;
      }

      .commission-value {
        font-size: 13px;
        color: #2ecc71;
      }

      &.status-已完成 .status-text {
        background-color: #e8f7ef;
        color: #2ecc71;
      }

      &.status-配送中 .status-text {
        background-color: #f1f5ff;
        color: #4e7df9;
      }

      &.status-已付款 .status-text {
        background-color: #fff8e6;
        color: #f7b731;
      }

      &.status-已取消 .status-text {
        background-color: #fee7e7;
        color: #e74c3c;
      }
    }
  }
}

@media (max-width: 576px) {
  .dashboard-overview {
    grid-template-columns: 1fr;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .overview-card {
    .overview-value {
      font-size: 20px;
    }
  }

  .order-item {

    .order-info,
    .order-details,
    .order-status {
      flex-direction: column;
      align-items: flex-start;

      .order-date,
      .order-amount,
      .commission-value {
        margin-top: 4px;
      }
    }

    .order-status {
      margin-top: 8px;
    }
  }
}

// 快捷操作区域样式
.quick-actions {
  margin-top: 32px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 24px;

  &__title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px 0;
  }

  &__buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;

    @media (max-width: 768px) {
      flex-direction: column;
    }
  }
}

// 按钮样式
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  border: none;

  i {
    margin-right: 8px;
    font-size: 16px;
  }

  &-primary {
    background-color: #FF4757;
    color: #fff;

    &:hover {
      background-color: #ff2438;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(255, 71, 87, 0.3);
    }
  }

  &-secondary {
    background-color: #f8f9fa;
    color: #2F3542;
    border: 1px solid #dee2e6;

    &:hover {
      background-color: #e9ecef;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }
  }
}
</style>
